import * as echarts from 'echarts';
import { useEffect, useRef, useState } from 'react'
import dayjs from 'dayjs'
import { getxuefen } from '../../../request/index'
import Myecharts from '../../common/myecharts/myecharts';

const LeftBottom = () => {
    //    const lxuebox = useRef(null)

    // 聊天室接口
let ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086")

    const [option, setoption] = useState({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
            // 图例字体颜色
            textStyle: {
                color: '#fff'
            },
            // 图例形状 圆
            icon: 'circle'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210],
                //   取消折线之间的点
                showSymbol: false,
                //   折线之间幅度平滑
                smooth: true
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310],
                showSymbol: false,
                smooth: true
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410],
                showSymbol: false,
                smooth: true
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320],
                showSymbol: false,
                smooth: true
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                showSymbol: false,
                smooth: true
            }
        ]
    })
    
    useEffect(() => {
        //  // 初始化echarts
        // const myChart = echarts.init(lxuebox.current);

        // 从聊天室的后台接受数据
        ws.onmessage = (e) => {
            // console.log(e,'e')
            // 转换一下类型
            let brr = JSON.parse(e.data)
            // 后台数据替换option数据
            option.legend.data=brr.legendData
            option.series=brr.seriesData.map((item,index)=>{
                return {
                    name:brr.legendData[index],
                    type:"line",
                    stack:'Total',
                    data:item,
                    showSymbol:false,
                    smooth:true,
                }
            })

             let xData=[]
            let time=+new Date()
            for (let a=0;a<4;a++){
                xData.unshift(dayjs(time).format('HH:mm:ss'))
                time-=2*60*1000
            }
            option.xAxis.data = xData
            console.log(brr,option,'option')
            // 重新给option赋值
            setoption({...option})
            // myChart.setOption(option)
        }

        // // // 学生分布情况数据
        // getxuefen().then(res => {
        //     // setxuefen(res.data)
        //     // console.log(1111, res.data.data)
        //     // setxuefen(res.data.data)

        //     option.legend.data=res.data.data.result[0].legend.data
        //     option.series=res.data.data.result[0].series.map(item=>{
        //        item.showSymbol=false
        //        item.smooth=true
        //        return item
        //     })
        //     // moment

        //     let xData=[]
        //     let time=+new Date()
        //     for (let a=0;a<4;a++){
        //         xData.unshift(dayjs(time).format('HH:mm:ss'))
        //         time-=2*60*1000
        //     }
        //     option.xAxis.data = xData
        //     setoption({...option})
        //     // myChart.setOption(option)

        // })


        // myChart.setOption(option)

    }, [])

    return (
        <div style={{ width: '100%', height: '100%' }}>
            <Myecharts option={option}></Myecharts>
        </div>
    )
}
export default LeftBottom;